<!-- src/components/CampusRecruitment.vue -->
<template>
  <div class="campus-recruitment">
    <h2>校招专场</h2>
    <p class="subtitle">基于你的职业背景和发展目标，为你推荐最适合的优质企业</p>

    <div class="card-grid">
     <div v-for="i in 6" :key="i" class="card">
        <img src="../assets/images/xiaozhao3.png" alt="优选企业专场" class="banner-img" />
        <div class="card-footer">
            <div class="company-info">
            <h3>深圳腾讯科技有限公司</h3>
            <p class="job-count">热招职位 175个</p>
            </div>
            <button class="view-job-btn"  @click="goToJobPage">查看职位</button>
        </div>
     </div>
    </div>

    <div class="see-all">
      <a href="#" class="see-all-link">查看全部 ></a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CampusRecruitment',
   methods: {
    goToJobPage() {
      window.open('https://www.nowcoder.com/jobs/activity/v2/special-activity/index/26yx1', '_blank');
    }
  }
}
</script>

<style scoped>
.campus-recruitment {
  margin-top: 20px;
}

.subtitle {
  color: #666;
  font-size: 14px;
  margin-bottom: 20px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}

.card:hover {
  transform: translateY(-2px);
}

.banner-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: white;
  gap: 10px;
}

.company-info {
  flex: 1;
  margin: 0;
}

.company-info h3 {
  font-size: 16px;
  color: #333;
  margin: 0;
}

.job-count {
  font-size: 12px;
  color: #999;
  margin: 4px 0;
}

.view-job-btn {
  padding: 6px 12px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.view-job-btn:hover {
  background-color: #3a8ee6;
}

.see-all {
  text-align: right;
  margin-top: 10px;
}

.see-all-link {
  color: #409eff;
  text-decoration: none;
  font-size: 14px;
}

.see-all-link:hover {
  text-decoration: underline;
}
</style>